{% extends "UiManager/base.html" %}
{% block title %}设备管理{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 设备管理 > 设备列表</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
    <script>
        function updateDevice(id) {
            var data = JSON.stringify({"id": id});
            $.ajax({
                url: '/ui/update_device/',
                type:'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        location.reload()
                    }else {
                        alert('update failed!')
                    }
                }
            });
        }
    </script>
{% endblock %}
{% block content %}
    <div id="page-wrapper">
        <div id="page-inner">
            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body" style="min-height:500px">
                            <div class="row mar-bottom-20">
                                <div class="form-inline">
                                    <form id="pro_filter" method="POST" action="/ui/device/">
                                        <div class="col-lg-12">
                                            <div class="input-group">
                                              <input name="search_device_name" type="text" class="form-control" placeholder="设备名称" value="{{ search_device_name }}">
                                                <span class="input-group-btn">
                                                <button class="btn btn-primary" type="submit">搜索</button>
                                              </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-12 -->
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                  <thead>
                                    <tr>
                                      <th>deiviceid</th>
                                      <th>port</th>
                                      <th>aport</th>
                                      <th>bport</th>
                                      <th>isused</th>
                                      <th>tag</th>
                                      <th>操作</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                  {% for row in obj %}
                                    <tr>
                                      <td>{{ row.deviceid }}</td>
                                      <td>{{ row.port }}</td>
                                      <td>{{ row.aport }}</td>
                                      <td>{{ row.bport }}</td>
                                      <td>{{ row.isused }}</td>
                                      <td>{{ row.tag }}</td>
                                      <td>
                                          <button class="btn-primary" onclick="updateDevice('{{ row.p_id }}')">修改</button>
                                          <button class="btn-danger">删除</button>
                                      </td>
                                    </tr>
                                  {% endfor %}
                                  </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
            <!-- /. 表格  -->
        </div>
        <!-- /. PAGE INNER  -->
    </div>

{% endblock %}